<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.toast-container{
				position: absolute;
				left: 0;
				top:0;
				bottom:0;
				right: 0;
				z-index: 2000;
				display: flex;
				justify-content:center;
				align-items: center;
			}
			.toast{
				width: 180px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				background-color: rgba(0,0,0,0.3);
				border-radius: 10px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<section class="toast-container">
			<div class="toast">
				<span>hello,Toast</span>
			</div>
		</section>
		<script type="text/javascript">
		new Vue({
			el:'#app',
			methods:{
					toast: function () {
							this.$toast.show("请求失败!")
					}
			}
		})
		</script>
	</body>
</html>
